<template>
  <div class="list" ref="list">
    <div>
      <div class="area">
        <div class="title">当前位置</div>
        <div class="cur-position">
          <span>{{city}}</span>
        </div>
      </div>
      <div class="area">
        <div class="title">热门城市</div>
        <ul class="hot-cities" v-if="hotCities !== undefined">
          <li class="city-item border-bottom border-rightbottom" v-for="city in hotCities" :key="city.id" @click="citySelect(city.name)">{{city.name}}</li>
        </ul>
      </div>
      <div class="area">
        <div class="title">字母排序</div>
        <ul class="letter-list list" v-if="cities !== undefined">
          <li class="letter-item" v-for="(item,key) of cities" :key="key" @click.prevent="scrollTo(key)">{{key}}</li>
        </ul>
      </div>
      <div class="area" v-for="(item,key) of cities" :key="key" :ref="key">
        <div class="title">{{key}}</div>
        <ul class="city-list list">
          <li class="city-item border-rightbottom" v-for="city in item" :key="city.id" @click="citySelect(city.name)" >{{city.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import {mapState, mapActions} from 'vuex'
export default {
  name: 'List',
  props: {
    hotCities: Array,
    cities: Object
  },
  mounted () {
    this.listScroll = new BScroll(this.$refs.list)
  },
  methods: {
    scrollTo (key) {
      const ele = this.$refs[key][0]
      this.listScroll.scrollToElement(ele, 300)
    },
    ...mapActions(['changeCity']),
    citySelect (cityName) {
      // this.$store.dispatch('changeCity', cityName)
      this.changeCity(cityName)
      this.$router.push('/')
    }
  },
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~css/common.styl'
.list
  background #f5f5f5
  overflow hidden
  flex 1
  .area
    width 100%
    .title
      font-size .24rem
      color #333
      line-height .8rem
      padding-left .24rem
    .cur-position 
      height 1rem
      font-size .24rem
      color #ccc
      padding-left .24rem
      background #fff
      line-height 1rem
      span
        display inline-block
        width 2rem
        height 0.5rem
        border 1px solid $bgColor
        border-radius .1rem
        color $bgColor
        text-align center
        line-height .5rem
    .hot-cities
      width 100%
      display flex
      flex-wrap wrap
      background #fff
      
      .city-item
        width 33.33% 
        height .9rem
        font-size .28rem
        text-align center
        line-height 0.9rem   
        &.border-bottom::before
          border-color #ccc
    .list
      width 100%
      padding .2rem 0
      background #fff
      display flex
      flex-wrap wrap
      background #fff
      .letter-item
        width 16.6%
        height .9rem
        text-align center
        line-height .9rem
        font-size .24rem      
    .city-list
      .city-item
        width 25%
        height .9rem
        font-size .24rem
        text-align center
        line-height .9rem
</style>